<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <i class="el-icon-info" />
          <span>总记录数: 200</span>
        </template>
        <template #right>
          <el-button type="warning" size="small" @click="$router.push('/import')">excel导入</el-button>
          <el-button type="danger" size="small" @click="exportExcel">excel导出</el-button>
          <el-button type="primary" size="small" @click="add">新增员工</el-button>
        </template>
      </page-tools>

      <el-card style="margin-top: 10px;">
        <!--
          prop渲染默认的样子 后端返回的是啥就渲染啥
          基于源数据做二次转化 - template
         -->
        <el-table :data="list" border>
          <el-table-column width="60" label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="工号">
            <template #default="{row}">
              <el-image :src="row.staffPhoto" class="staffPhoto">
                <template #error>
                  <div class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </template>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式">
            <template #default="{row}">
              <!-- 只有俩种状态 三元 复杂 函数调用 -->
              {{ formatFormOfEmployment(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间">
            <template #default="{row}">
              {{ formatTime(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="{row}">
              <el-button type="text" size="small" @click="goDetail(row)">查看</el-button>
              <el-button type="text" size="small" @click="assignRole(row.id)">分配角色</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 新增组件 -->
    <add-employee :visible="visible" @close-dialog="closeDialog" @update-list="fetchList" />
    <!-- 分配角色 -->
    <assign-role :show-role-dialog="showRoleDialog" :cur-id="curId" @close-role-dialog="closeRoleDialog" />
  </div>
</template>

<script>
// 1. 准备一个初始化的参数 2.基础的数据拉回来 3. 修改参数获取分页数据
import { getEmployeeList } from '@/api/employee'
import AddEmployee from './components/add-employee.vue'
import AssignRole from './components/assign-role.vue'
import { getExportData } from '@/utils/excel'
import dayjs from 'dayjs'
export default {
  name: 'Employee',
  components: {
    AddEmployee,
    AssignRole
  },
  data() {
    return {
      list: [],
      params: {
        page: 1,
        size: 50
      },
      visible: false,
      showRoleDialog: false,
      curId: '' // 当前要分配角色的员工id
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    async fetchList() {
      const { rows } = await getEmployeeList(this.params)
      this.list = rows
    },
    formatFormOfEmployment(value) {
      // 基于value源数据做二次转化 最后return出去
      // 前端枚举 把所有的状态对应关系 都枚举出来
      const map = {
        1: '正式',
        0: '非正式',
        2: '超级员工'
      }
      return map[value]
    },
    formatTime(time) {
      // 时间转换 插件
      return dayjs(time).format('YYYY-MM-DD')
    },
    add() {
      this.visible = true
    },
    closeDialog() {
      this.visible = false
    },
    exportExcel() {
      // 动态导入语法只有点击了导出按钮才会动态加载这里的js文件
      // 否则不会出现在我们的应用中
      import('@/vendor/Export2Excel').then(async excel => {
        // excel表示导入的模块对象
        // 1. 调用接口获取到当前页的数据
        const { rows } = await getEmployeeList(this.params)
        // 2. 把后端返回的对象数组转化成二维数组
        const headerRelation = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '工号': 'workNumber',
          '聘用形式': 'formOfEmployment',
          '部门': 'departmentName'
        }
        const formatData = getExportData(rows, headerRelation)

        // 3. 准备表头二维数据放到对应的位置
        excel.export_json_to_excel({
          header: Object.keys(headerRelation), // 表头header 必填 要求是一个数组
          data: formatData.data, // 表格数据body 要求是一个二维数组
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },
    goDetail(row) {
      // query + path
      this.$router.push({
        path: '/employeedetail',
        query: {
          id: row.id
        }
      })
    },
    // 分配角色
    assignRole(id) {
      this.showRoleDialog = true
      this.curId = id
    },
    closeRoleDialog() {
      this.showRoleDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.staffPhoto{
  width: 60px;
  height: 60px;
  border-radius: 30px;
}
</style>
